<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'" style="line-height:74px;heighi:74px">
				bang管理系统
			</el-col>
			<el-col :span="10" class="userinfo">
        <div class="userinfo_right">
          <img class="userinfo_color1" src="../assets/shudown.png" />
          <span class="userinfo_color1" style="margin-left:4px">退出</span>
        </div>
        <div class="userinfo_right">
					<img class="userinfo_color1" src="../assets/bg1.png" />
          <span class="userinfo_color1" style="margin-left:4px">admin</span>
        </div>
			</el-col>
		</el-col>

	<el-col class="main" style="height:100%">
	<aside class="main-aside" id="elMenu2">

 <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" :collapse="isCollapse">
   <el-menu-item-group title="分组一">

   <el-menu-item index="2" @click.self="gotoPath('personnel')" :class="active1===('personnel')?'is-active1':'none'"><i class="el-icon-message"></i>类目管理</el-menu-item>
      
      <el-menu-item index="2" @click.self="gotoPath('department')" :class="active1===('department')?'is-active1':'none'"><i class="el-icon-menu"></i>属性管理</el-menu-item>

      <el-menu-item index="3" @click.self="gotoPath('station')" :class="active1===('station')?'is-active1':'none'"><i class="el-icon-setting"></i>属性值管理</el-menu-item>
    </el-menu-item-group>
</el-menu>
</aside>
  <section class="main-section" style="height: 100%;">
  <div class="tip">
  <transition-group name="list-complete" tag="div">
  <span v-for="tag in dynameicTags" @click="gotoPath(tag.path)" :key="tag" class="list-complete-item1" :class="tag.type=='primary'?'is-primary':'is-gray'">
  <el-tag
  :type="tag.type"
  :closable="true"
  :close-transition="false"
  @close.stop.self="handleClose(tag)"
>
{{tag.name}}
</el-tag>
</span>
</transition-group>
</div>
    <transition name="fade" mode="out-in">
              <router-view></router-view>
    </transition>
  </section>
	</el-col>
	</el-row>
</template>

<script>
  import {mapState, mapMutations} from 'vuex' 
	export default {
		data() {
			return {
           isCollapse: true,
           type1:'primary',
			}
		},
    computed: {
      ...mapState(['dynameicTags','vinManage','active1','isIn']),
    },
		methods: {
      ...mapMutations(['CHANGEDYNAME','CHANGEACTIVE','CHANGEISIN']),
      //标签和路由切换,想叫后台写个活的？
      gotoPath(path){
       if(path=='addFile'){this.CHANGEACTIVE('vinManage')}else{
       this.CHANGEACTIVE(path);
       }
       let option={};
       option.path=path;
       this.dynameicTags.forEach((item)=>{
       if(item.path===path){this.CHANGEISIN('isTrue');item.type='primary';}else{item.type='gray';}
       })
        switch(path)
        {
        case 'personnel':
        option.name='类目管理';
        option.type='primary';
        break;
        case 'department':
        option.name='属性管理';
        option.type='primary';
        break;
        case 'station':
        option.name='属性值管理';
        option.type='primary';
        break;
        default:
        break;
        }
        if(this.isIn!=='isTrue'){
        this.dynameicTags.push(option);
        if(this.dynameicTags.length>9){
        window.setTimeout(()=>{this.dynameicTags.splice(0,1)},500)
        }
        }
        this.$router.push({path:path});
        this.CHANGEISIN('isFalse')
      },
      handleClose(tag) {
        this.dynameicTags.splice(this.dynameicTags.indexOf(tag), 1);
        let len = this.dynameicTags.length;
        if(len>=1){
        this.dynameicTags[len-1].type='primary';
        this.$router.push({path:this.dynameicTags[len-1].path});
        this.CHANGEACTIVE(this.dynameicTags[len-1].path);
        }
      },
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {});
			 },
		  showMessage1:function() {
		  this.$notify({
          title: '温馨提示',
          message: '目前还未提供这项功能，如果有需要到时会陆续提供。',
          type: 'warning'
        });
     },
		showMessage2:function() {
		this.$notify({
          title: '温馨提示',
          message: '目前还未提供这项功能，如果有需要到时会陆续提供。',
          type: 'warning'
        });
        },
    showMessage3:function() {
        this.$message('除了叫实时监控外，我还有一个身份：。');
      }
		},
		mounted() {
    this.gotoPath('personnel');
		}
	}
</script>

<style scoped lang="scss">
.bgimg_one img{vertical-align: middle;margin-right:8px;margin-top:-2px;display:inline-block}
.is-active1{background:#27292b!important;color:#fff!important}
.none{color:#99A9BF!important;background:#2c2f32!important}
.tip{width:100%;height:46px;background:#fff;box-sizing:border-box;z-index:1;
margin-bottom:16px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border-bottom:1px solid #c8c8c8;
}
.tip div span:first-child{margin-left:0}
.tip span span{margin: 5px 0;cursor:pointer;height: 36px;line-height: 34px;}
  .line{
  width:2px;
  padding:0px!important;
  height:10px;
  background:#58B7FF
  }
  .header_left{
     height:74px;
  }
    .el-loading-mask{
    background-color:none;
    }
	@import '~scss_vars';

	.bg-color{
			background:#eef1f6;
		}
	.container {
		position: absolute;
		top: 0px;
		bottom: 50px;
		width: 100%;
    min-width:1240px;
		.header {
		position:relative;
      z-index:9;
			height: 74px;
			line-height: 74px;
      -webkit-box-shadow:4px 4px 6px rgba(215, 215, 215, .5);  
      -moz-box-shadow:4px 4px 6px rgba(215, 215, 215, .5);  
      box-shadow:4px 4px 6px rgba(215, 215, 215, .5); 
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 5px;
				float: right;
        .userinfo_right{
          height:74px;
          cursor:pointer;
          margin-left:16px;
          float:right
         }
				.userinfo-inner {
					cursor: pointer;
					color:#333333;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
            vertical-align:middle
					}
				}
        .userinfo_color1{
        font-size:14px;
        color:#000;
        vertical-align:middle
        }
			}

			.logo {
				//width:230px;
				height:74px;
        line-height:74px;
				font-size: 22px;
				padding-left:12px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:260px;
				color:#ed6d00;
        box-sizing:border-box
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 4px;
				width:240px;
				height: 74px;
				line-height: 74px;
				cursor: pointer;
				.m-left{margin-left:8px}
        span{display:inline-block;cursor:pointer;padding:0 4px;transition:all 0.5s}
        span:hover{color:#EFF2F7}
			}
		}
	}


	.main{
	width:100%;

	.main-aside{
      overflow-y:auto;
      position:relative;
      z-index:10;
	    display:block;
	    width: 200px;
      float:left;
	    height:100%;
	    background:#2c2f32;
        .search{
           position:relative;

           width:100%;
           height:62px;
           background:#262b2f;
           border-bottom:1px solid #494e54;
           padding-top:14px;
           box-sizing:border-box;
              .search_div{
                 width:254px;
                 background:#fff;
                 height:34px;
                 margin:0 auto;
                 input{
                    height:34px;
                    width:150px;
                    border:none;
                    padding-left:16px;
                    display:inline-block;
                    outline:none;
                    background:none;
                 }
                 .search_line{
                    width:1px;
                    background:#cccccc;
                    height:32px!important;
                    margin-top:1px;
                 }
                 .search_button{
                    cursor:pointer;
                    background:#ed6d00;
                    width:44px;
                    img{
                       margin: 10px 14px;
                    }
                 }
                 .search_block{
                    float:right;
                    display:inline-block;
                    height:34px;
                 }
                 .search_refresh{
                    width:36px;
                    cursor:pointer;
                    img{
                       margin:10px;
                    }
                 }
              }
        }
	}
	}
	.main-section{
  padding:24px;
  background:#f8f8f8;
  overflow-y:auto;
  border: 1px solid #eaeefb;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; 
  display:block;
  float:left;
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  width: -o-calc(100% - 200px);
  width: -ms-calc(100% - 200px);
	}


</style>